<html>

<style>
    .overflow-hidden {
        overflow:visible;
    }

    .bg-slate-300 {
        background-color: rgb(203 213 225);
    }

    .slog-collapse-target[aria-expanded='false'] {
        display: none;
    }

    .slog-collapse-target[aria-expanded='true'] {
        display: block;
    }

    .slog-collapse-target-collapsing{
        transition-property: height;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 1500ms;
    }

</style>

<body>
    <button id="a" role="button">AAA</button>
    <div id='b' class="slog-collapse-target overflow-hidden bg-slate-300" aria-expanded='true'>
        <div>
            Some placeholder content for the collapse component. This panel is hidden by default but revealed
            when the user activates the relevant trigger.
        </div>
        <div>
            Some placeholder content for the collapse component. This panel is hidden by default but revealed
            when the user activates the relevant trigger.
        </div>
        <div>
            Some placeholder content for the collapse component. This panel is hidden by default but revealed
            when the user activates the relevant trigger.
        </div>
    </div>
</body>

<script>

    let triggerElement = document.body.querySelector("#a");
    let targetElement = document.body.querySelector("#b");
    let visible = true;

    triggerElement.addEventListener("click", (e) => {
        !visible ? Show() : Hide();
    });
    targetElement.ontransitionend = () => {
        targetElement.style["height"]= null;
        targetElement.classList.replace(
            "slog-collapse-target-collapsing",
            "slog-collapse-target"
        );
        console.log("end of trans", targetElement.style.getPropertyValue("height"));
    };
    let _offHeight = 0;
    const Show = () => {
        if(visible) return;
        targetElement.style["height"]= '0px';
        targetElement.classList.replace(
            "slog-collapse-target",
            "slog-collapse-target-collapsing"
        );
        targetElement.setAttribute("aria-expanded", true);
        _offHeight = targetElement.scrollHeight;
        targetElement.style.setProperty("height", `${_offHeight}px`);
        visible = true;
    };
    const Hide = () => {
        if(!visible) return;
        _offHeight = targetElement.scrollHeight;
        //targetElement.style["height"]= `${_offHeight}px`;
        console.log(targetElement.style.getPropertyValue("height"));
        targetElement.classList.replace(
            "slog-collapse-target",
            "slog-collapse-target-collapsing"
        );
        targetElement.setAttribute("aria-expanded", false);
        targetElement.style.cssText='height:100px';
        targetElement.style.setProperty("height", "0px");
        visible = false;
    };

</script>

</html>
